import { ref, reactive, computed, watchEffect, watch } from 'vue'
export function useAbout () {
  const count = ref(0)
  const obj = reactive({
    a: 100
  })
  const doubleCount = computed(() => count.value * 2)
  function handleClick () {
    // 因为count 是 通过 ref 设置的
    // ref设置的值 需要通过value属性修改值
    count.value += 1
    // reactive 设置的值直接修改即可
    obj.a = 1000
    console.log(count)
  }
  watchEffect(() => {
    console.log('change count', count.value)
    console.log('change obj', obj.a)
  })

  watch(count, (newCount, oldCount) => {
    // 侦听属性 不写 .value
    console.log(newCount, oldCount)
  })
  return {
    count,
    obj,
    handleClick,
    doubleCount
  }
}